<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript">
    if (!navigator.userAgent.toLowerCase().match('chrome')) {
        document.write("<script type='text/javascript' src='cordova.js'><\/script>");
    }
</script>
<script src='cordova.js'></script>
<script src="js/jquery/2.1.3/jquery-2.1.3.min.js"></script>
<script src="js/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
//add listener when device ready
document.addEventListener("deviceready", onDeviceReady, false);
var db = window.openDatabase("Dummy_DB", "1.0", "Just a Dummy DB", 200000); //will create database Dummy_DB or open it
//onDeviceReady();
//function will be called when device ready
function onDeviceReady(){
	//alert('call');
    db.transaction(populateDB, errorCB, successCB);
}

//create table and insert some record
function populateDB(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS SoccerPlayer (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Club TEXT NOT NULL)');
    tx.executeSql('INSERT INTO SoccerPlayer(Name,Club) VALUES ("Alexandre Pato", "AC Milan")');
    tx.executeSql('INSERT INTO SoccerPlayer(Name,Club) VALUES ("Van Persie", "Arsenal")');
}

//function will be called when an error occurred
function errorCB(err) {
    alert("Error processing SQL: "+err.code);
}

//function will be called when process succeed
function successCB() {
    //alert("success!");
    db.transaction(queryDB,errorCB);
}

//select all from SoccerPlayer
function queryDB(tx){
    tx.executeSql('SELECT * FROM SoccerPlayer ',[],querySuccess,errorCB);
}

function querySuccess(tx,results){
    $('#SoccerPlayerList').empty();
//     $.each(results.rows.length,function(i){
//          var row = results.rows.item(i).data;
//          $('#SoccerPlayerList').append('<li><a href="#"><h3 class="ui-li-heading">'+row['Name']+'</h3><p class="ui-li-desc">Club '+row['Club']+'</p></a></li>');
//     });
    var len = results.rows.length;
    for (var i=0; i<len; i++){
    	var row = results.rows.item(i);
//         console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).name);
    	$('#SoccerPlayerList').append('<li><a href="#"><h3 class="ui-li-heading">'+row['Name']+'</h3><p class="ui-li-desc">Club '+row['Club']+'</p></a></li>');
    }

    $('#SoccerPlayerList').listview();
}
</script>
</head>
<body>
 
<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Soccer Player</h1>
  </div>
  <div data-role="content">
     <ul id="SoccerPlayerList">
    </ul>
  </div>
</div>
<!--end of Soccer Player Page--->
</body>
</html>